<template>
	<div>
		<t-button @click="insuranceButtonClick" v-show="insuranceButtonShow">保险办理</t-button>
		<!-- 保险弹窗 -->
		<t-dialog :visible.sync="visible" width="736px" :onConfirm="onConfirmAnother" :confirmBtn="loading" ref="dialog">
			<span class="text-lg text-gray-900 font-bold">保险办理</span>
			<transition-group name="formList" ref="span">
				<t-form v-for="(item, uuid) in formData" :key="item.uuid" :data="item" labelAlign="top">
					<div class="w-full" style="height: 24px;"></div>
					<t-divider style="margin-top: 0;"></t-divider>
					<div class="flex justify-between">
						<t-form-item label="交保日期" name="insurance_date" requiredMark class="w-80">
							<t-date-picker class="w-full" v-model="item.insurance_date" placeholder="请选择交保日期"
								:status="item.verify.insurance_date_status" :tips="item.verify.insurance_date_tips"
								:onBlur="insuranceDateBlur"></t-date-picker>
						</t-form-item>
						<t-form-item label="交保类型" name="type" requiredMark class="w-80">
							<t-select v-model="item.type" placeholder="请输入交保类型" :options="typeOptions"
								:status="item.verify.type_status" :tips="item.verify.type_tips" :onBlur="typeBlur">
							</t-select>
						</t-form-item>
					</div>
					<div class="flex justify-between">
						<t-form-item label="交保账号" name="account_number" requiredMark class="w-80">
							<t-input v-model="item.account_number" placeholder="请输入交保账号"
								:status="item.verify.account_number_status" :tips="item.verify.account_number_tips"
								:onBlur="accountNumberBlur"></t-input>
						</t-form-item>
						<t-form-item label="备注" name="remarks" class="w-80">
							<t-input v-model="item.remarks" placeholder="请输入相关备注"></t-input>
						</t-form-item>
					</div>
					<!-- 删除按钮 -->
					<icon name="delete" class="cursor-pointer hover:text-blue-700" size="small" @click="deleteInsurance(item.uuid)"></icon>
				</t-form>
			</transition-group>
			<div
				class="w-full flex justify-center items-center h-20 border border-l-0 border-b-0 border-r-0 border-gray-200 mt-4">
				<!-- 添加按钮 -->
				<t-button variant="outline" @click="addInsurance">
					<add-circle-icon slot="icon" />添加一段
				</t-button>
			</div>
		</t-dialog>
	</div>
</template>

<script>
	import { Icon, AddCircleIcon } from 'tdesign-icons-vue'
	import { toDay } from '@/unit/myDate'
	import { isSpecial } from '@/unit'
	import { uuid } from '@/unit/uuid'

	export default {
		name: 'InsuranceButton',
		components: {
			Icon,
			AddCircleIcon
		},
		props: {
			btnShow: {
				default: false,
			},
			props_user_id: {
				default: 0
			}
		},
		data(props) {
			return {
				insuranceButtonShow: props.btnShow,
				// 控制弹窗显示
				visible: false,
				// 提交的表单
				formData: [{
					uuid: '',
					user_id: props.props_user_id,
					insurance_date: '',
					type: '',
					account_number: '',
					remarks: '',
					verify: {
						insurance_date_status: '',
						insurance_date_tips: '',
						type_status: '',
						type_tips: '',
						account_number_status: '',
						account_number_tips: '',
					}
				}],
				// 选择框
				typeOptions: [{
						value: '养老保险',
						label: '养老保险'
					},
					{
						value: '生育保险',
						label: '生育保险'
					},
					{
						value: '医疗保险',
						label: '医疗保险'
					},
					{
						value: '失业保险',
						label: '失业保险'
					},
					{
						value: '工伤保险',
						label: '工伤保险'
					},
					{
						value: '公积金',
						label: '公积金'
					}
				],
				// 提交状态
				loading: {}
			}
		},
		methods: {
			// 交保日期校验
			insuranceDateBlur() {
				for (let i = 0; i < this.formData.length; i++) {
					if (this.formData[i].insurance_date === '') {
						this.formData[i].verify.insurance_date_status = 'error'
						this.formData[i].verify.insurance_date_tips = '交保日期是必选项'
						return false
					} else {
						this.formData[i].verify.insurance_date_status = ''
						this.formData[i].verify.insurance_date_tips = ''
					}
				}
				return true
			},
			// 交保类型校验
			typeBlur() {
				for (let i = 0; i < this.formData.length; i++) {
					if (this.formData[i].type === '') {
						this.formData[i].verify.type_status = 'error'
						this.formData[i].verify.type_tips = '交保类型是必选项'
						return false
					} else {
						this.formData[i].verify.type_status = ''
						this.formData[i].verify.type_tips = ''
					}
				}
				return true
			},
			// 交保账户校验
			accountNumberBlur() {
				for (let i = 0; i < this.formData.length; i++) {
					if (this.formData[i].account_number === '') {
						this.formData[i].verify.account_number_status = 'error'
						this.formData[i].verify.account_number_tips = '交保账号是必填项'
						return false
					}
					if (!isSpecial(this.formData[i].account_number)) {
						this.formData[i].verify.account_number_status = 'error'
						this.formData[i].verify.account_number_tips = '交保账号不能含有特殊字符'
						return false
					}
					this.formData[i].verify.account_number_status = ''
					this.formData[i].verify.account_number_tips = ''
				}
				return true
			},
			// 保险办理按钮点击
			insuranceButtonClick() {
				this.visible = true
			},
			// 提交方法
			onSubmit() {
				if (!(this.insuranceDateBlur() && this.typeBlur() && this.accountNumberBlur())) {
					this.loading = {}
					return this.$message.error('请检查表单中不合法的选项')
				}
				let arr = []
				for (let i = 0; i < this.formData.length; i++) {
					arr[i] = {}
					arr[i].user_id = this.$props.props_user_id
					arr[i].insurance_date = this.formData[i].insurance_date
					arr[i].type = this.formData[i].type
					arr[i].account_number = this.formData[i].account_number
					arr[i].remarks = this.formData[i].remarks
				}
				this.$store.dispatch('user/addInsurance', arr).then(res => {
					this.loading = {}
					if (res.status === 0) {
						this.$message.success(res.message)
						if(this.$route.query.id){
							this.$bus.emit('getUserData')
						}
						this.visible = false
					} else {
						this.$message.error(res.message)
					}
				}).catch(err => {
					this.loading = {}
					this.$message.error(err)
				})
			},
			// 确认按钮
			onConfirmAnother() {
				this.loading = {
					content: '提交中...',
					theme: 'primary',
					loading: true,
				}
				this.onSubmit()
			},
			// 添加保险表单
			addInsurance() {
				this.$refs.dialog.$el.children[1].children[0].children[0].style.height = (532 + 250 * this.formData.length) + 'px'
				this.$refs.span.$el.style.height = 249 * (this.formData.length+1) + 'px'
				this.formData.push({
					uuid: uuid(8, 10),
					user_id: this.formData[0].user_id,
					insurance_date: toDay(),
					type: '养老保险',
					account_number: '',
					remarks: '',
					verify: {
						insurance_date_status: '',
						insurance_date_tips: '',
						type_status: '',
						type_tips: '',
						account_number_status: '',
						account_number_tips: '',
					}
				})
			},
			// 删除保险表单
			deleteInsurance(uuid) {
				if (this.formData.length === 1) {
					return this.$message.warning('保险表单只剩一组，无法继续删除')
				}
				this.formData = this.formData.filter(item => {
					return item.uuid !== uuid
				})
				this.$refs.span.$el.style.height = 247 * this.formData.length + 'px'
				this.$refs.dialog.$el.children[1].children[0].children[0].style.height = (532 + 247 * (this.formData.length - 1)) + 'px'
			}
		},
		created() {
			for (let i = 0; i < this.formData.length; i++) {
				this.formData[i].insurance_date = toDay()
				this.formData[i].type = '养老保险'
				this.formData[i].uuid = uuid(8, 10)
			}
		},
		mounted() {
			this.$refs.dialog.$el.children[1].children[0].children[0].style.height = '532px'
			this.$refs.dialog.$el.children[1].children[0].children[0].style.transition = '1s'
			this.$refs.span.$el.style.display = 'block '
			this.$refs.span.$el.style.height = '249px'
			this.$refs.span.$el.style.transition = '1s'
			this.$refs.span.$el.style.overflow = 'hidden'
		}
	}
</script>

<style lang="less" scoped>
	.formList-enter-active {
		animation: formStart 0.8s
	}

	.formList-leave-active {
		animation: formEnd 0.8s
	}

	@keyframes formStart {
		from {
			opacity: 0;
			transform: translateY(-100%);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes formEnd {
		from {
			opacity: 1;
			transform: translateX(0);
			height: 249px;
		}

		to {
			opacity: 0;
			transform: translateX(-100%);
			height: 0;
		}
	}
</style>
